/*
 * @Author: scopesang
 * @Date: 2022-04-08 11:23:09
 * @LastEditors: scopesang
 * @LastEditTime: 2022-04-08 13:26:01
 * @FilePath: \cms-manage\src\textApp\App07LifeCycleOne.jsx
 * @Description: 一个组件的生老病死 
 * 
 * React生命周期可以分成三个阶段：
1、实例化(挂载阶段)：对象创建到完全渲染
2、存在期(更新期)：组件状态的改变（props state）
3、销毁/清除期：组件使用完毕后，或者不需要存在与页面中，那么将组件移除，执行销毁。
 * Copyright (c) 2022 by scopesang/大鹏科技, All Rights Reserved. 
 */

// 1、实例化(挂载阶段)：对象创建到完全渲染
// constructor componentWillMount  render componentDidMount
import React, { Component } from 'react'

export default class App07LifeCycleOne extends Component {
    // 生命周期第一个阶段： 挂载/初始化阶段
    constructor(props) {
        console.log("1.1 constructor: 构造初始化")
        // 调用父类构造方法
        super(props)

        // 初始化状态数据
        this.state = {

        }
        // 事件函数this的绑定
        this.handleClick = this.handleClick.bind(this)

    }

    componentWillMount() {
        console.log("1.2 componentWillMount")
        //做一些准备性的工作，比如提示正在加载
    }

    componentDidMount() {
        console.log("1.4 componentDidMount")
        //异步加载数据
    }


    // 生命周期第二个阶段  存在期/更新期
    // 接收新的 props 值的时候 
    componentWillReceiveProps() {
        console.log("2.1 componentWillReceiveProps")
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log("2.2 shouldComponentUpdate 可以判断修改前后的值是不是一样，不一样才去执行render。减少不必要的render，优化更新性能")
        console.log("旧的值：", this.state.num)
        console.log("新的值：", nextState.num)

        // return true   则执行render
        // return false   则不执行render
        //这里返回值是布尔值，但不应该写死，
        //而是判断新旧两个值是不是不相等，不相等就要执行render(就要返回true)
        return this.state.num !== nextState.num
    }
    componentWillUpdate(nextProps, nextState) {
        console.log("2.3 componentWillUpdate 更新前的生命周期回调")
    }
    componentDidUpdate(prevProps, prevState) {
        console.log("2.5 componentDidUpdate 更新后的生命周期回调")
    }

    // 销毁期
    componentWillUnmount() {

    }

    handleClick() {
        this.setState({
            num: 22
        })
    }

    render() {
        console.log("1.3 render")
        return (
            <div>
                <p onClick={this.handleClick}>这是一个展示生命周期的组件</p>
                <p onClick={this.handleClick}>这是一个展示生命周期的组件</p>
                <p onClick={this.handleClick}>这是一个展示生命周期的组件</p>
            </div>
        )
    }
}
